Creating real-world web pages

However carefully thought out, tutorials never seem to replicate the practical experience of designing the real thing, so we now offer a final exercise to get you started with a typical simple, but eye-catching home page. This one is based on the actual homepage of the author of this manual.

Web page authoring and design, like graphic design, benefits enormously from careful thought and preparation beforehand.One sure way of wasting time is to start mucking around with web pages on the computer with no particular idea about what you are trying to achieve. No matter how basic your drawing skills, sketch out on paper the main elements of your page first, and then think through what that means in terms of web page construction.

In this case, the 'Home Page' called for an 'embossed paper' effect background, with the embossing formed by words in white out of grey on a very light grey background, describing the services of the company - Shared Vision - slanting across the page. This was set up in !Artworks (!Draw will do just as well) although there are some excellent background textures available from RComp, and many users will find exactly what they want in Textures Volume 1, or Textures Pro.

A sprite was made of the design using Snapshot in !Paint, and saved. A four-colour version of the Shared Vision logo, already existed as a sprite .Its size was halved in !ChangeFSI (although this could more easily be done at the time of conversion using !ImageConv), checking that it was an 8 bit RGB sprite - avoid big files, they take far too long to load. Finally, use the image importer on the HTMLEdit toolbar, (accessed from the menu via Edit Default Text) to convert the sprites to gifs, so they are compatible with all internet users, regardless of computer type. They are then filed in a WebFS directory (accessed from the menu via WebFS) and given the title SVision.

The Home Page was to be as simple as possible, since complicated designs with long scroll times cost visitors money and frequently mean they get bored and move on before your creative gem has fully unfurled! The subsequent linked pages were to set out the company's stall - photography, writing, graphic design, publishing and print, internet services, and communications training. Since in the logo, the shadow of the title is a graduated merge from magenta to cyan (echoing the reprographic nature of much of its work) it was decided to have the linked page subject headings in magenta, turning cyan when the links are visited. A rule was added across the page, a site update line, a webcounter and site management credit, with an email link to me. (Webcounters can be provided from a number of sources - usually through your ISP. This page uses the one available to Argonet users, it is a line of code linked to a driver on the Argo site).

New Doc
To execute the page, load HTMLEdit by clicking select on the icon, giving access to the Document Creation Assistant. This offers a choice of document types (see detail, left). HTML 3.2 compatible, is chosen and the document save prompt appears. Having already made a WebFS folder the new HTML file is dropped in there, giving it the title index/html. This is so the server can recognise it as a home page and present it first, giving all browsers a common starting point. All homepages must have this filename.

As you save the file, you are presented with the next Document Creation Assistant window, which asks for the title, type : Shared Vision Home Page; (or whatever you wish to call your site).

At the texture writable icon the sprite of the special background is added, now entitled background/html; background colour, is ignored; text, link and visited link colour, all selected via conventional RiscOS colour pickers.


Toolbar


Break



Preview

Clicking 'OK' presents the first page, fully set up and ready for the addition of text and images. The toolbar has now appeared at the top of the page, and the first operation is to drop the logo into the image setup icon. This results in the correct link being inserted in the page of code. Note that, at this stage, filenames follow the Acorn convention in using / as a separator; HTMLEdit automatically converts to the Unix convention, using . as the code, as it saves the links.

For ease of reading, separate each element of the page by line spaces; this has no effect on the HTML code unless you use the linebreak or paragraph buttons on the toolbar. (Fig3).

The list of contents of site is listed, and centred in large bold type, and each is, of course a link, so they are typed in first, prefixing each with the List button, then block them, select bold type, times four magnification, and centre. Blocking again, give each a link to the pages yet to be created. This causes the program to remind you that links do not exist yet, via the automatic checker.

The whole list is blocked and marked as a paragraph, then select a rule, type in a name and the creation date, add the webcounter and an email link (type mailto: email address) and save the code.

Clicking on Preview will load your WebsterXL browser (if that is your default browser and you have it filed in the HTML directory, or the root directory) and the page can be viewd offline in all its glory.

While the resulting Homepage will not win any prizes (fig. 4), it meets certain important criteria: it is quick to load, presents the viewer with all the text and images without any scrolling, and provides easy jumping off points to the other pages, as well as to its creator via email. HTMLEdit created the page in a very short space of time, converting all the images to compatible formats, checking spelling and code syntax, and providing a sound filing system which can be uploaded to the net and will be fully compatible with all servers, and accessible to all browsers.


Completed page

Uploading the pages

However 'cool' your site, it is worthless if nobody sees it but you, so a means of uploading it to a 'server' (the machines that have the primary connection with the Internet, and which store all the files which appear on the WWW.) is required.

Although various independent servers exist, in the main on University sites, they are principally used to store and distribute software made or used by enthusiasts and specialists. Most of us have our pages stored by the Internet Service Provider (ISP) with whom we have a subscription.

Indeed, many donate a generous amount of space as part of the subscription deal -5Mb is not uncommon, and that will accommodate a sizeable site. The files are usually stored in a File Transfer Protocol (FTP) archive, and uploading to them is simplicity itself.

Demon and Argonet are the two most popular Acorn- friendly sites on the web, although there are several others, and because the web is run by Unix machines, and HTML is a common language, readable by Acorns, PCs and Macs (or for that matter Ataris!) compatibility is not a problem. However, it certainly helps the confidence to feel that you are among friends, so we mention here the procedure for uploading files on Argonet and Demon.

Argonet has built a site loading and management utility called 'Webload' into its 'Voyager' suite, and this comes complete with an on-line tutorial to help you install it ( a Webload icon becomes a permanent feature of the Voyager toolbar) and to show you step by step how to upload your files, update and manage existing files.


Demon uses a conventional FTP site procedure, accessible from homepages.demon.co.uk. You will be required to log in using you account name, you will then be prompted for your account password (not your email address!) and this opens the root directory in which your directories and files are stored.

If you have a large site (20 pages or more), or a number of smaller sites, it is important to keep them refreshed and updated. This can be a chore unless some of the repetitive tasks are automated, and RComp have a utility - SiteMaster - designed for the job. This useful assistant will:

The products described in this manual are designed to simplify web page creation, but they are extremely powerful tools which give access to the very latest attributes and technologies of the WWW. Using them, and with patience and skill, you may become a top flight web page designer. Good luck!